<template>
  <div class="video-item">
    <div class="video-item1">
      <video
        ref="myVideo"
        :src="props.video.videoUrl"
        controls
        style="display: none"
      ></video>
      <canvas
        ref="myCanvas"
        @click="play"
        :style="[{ width: videoWidth }, { height: videoHeight }]"
        style="background: #000"
      ></canvas>
      <div
        @click="play"
        class="play-btn"
        :style="{ left: props.mobile === 'false' ? '10px' : '16%' }"
      >
        <img
          src="@/assets/icon/stop.png"
          alt=""
          class="oper-img"
          v-if="!isPlay"
        />
        <img src="@/assets/icon/play.png" alt="" class="oper-img" v-else />
      </div>
    </div>
    <div
      style="
        text-align: left;
        width: 100%;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
      "
      :class="{ mobile: props.mobile === 'false' ? false : true }"
    >
      <!-- <div>
          <el-button @click="changeVideo">切换类型</el-button>
        </div> -->
      <div
        class="oper"
        :class="{ fontM: props.mobile === 'false' ? true : false }"
      >
        <div style="color: #1296db">
          <img src="@/assets/icon/look.png" alt="" class="item-icon" />
          浏览&nbsp;{{ tool.numberTo(lookCount) }}
        </div>
        <div
          v-if="!props.hobby.isLike"
          @click="like(props.video.id, 1)"
          class="item"
        >
          <img src="@/assets/icon/aixin5.png" alt="" class="item-icon" />
          点赞&nbsp;{{ tool.numberTo(likeCount) }}
        </div>
        <div
          v-else
          style="color: #d81e06"
          class="item"
          @click="like(props.video.id, 2)"
        >
          <img src="@/assets/icon/aixin4.png" alt="" class="item-icon" />
          已点赞&nbsp;{{ tool.numberTo(likeCount) + 1 }}
        </div>
        <div
          v-if="!props.hobby.isCollect"
          class="item"
          @click="collect(props.video.id, 1)"
        >
          <img src="@/assets/icon/shouc4.png" alt="" class="item-icon" />
          收藏&nbsp;{{ tool.numberTo(collectionCount) }}
        </div>
        <div
          v-else
          style="color: #f5c707"
          class="item"
          @click="collect(props.video.id, 2)"
        >
          <img src="@/assets/icon/shouc5.png" alt="" class="item-icon" />
          已收藏&nbsp;{{ tool.numberTo(collectionCount) + 1 }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import tool from "@/assets/js/tool";
import { computed, defineProps, ref, onMounted, defineEmits } from "vue";

const emits = defineEmits(["like", "collect", "open"]);
const props = defineProps({
  video: {
    type: Object,
    default: () => {},
  },
  mobile: {
    type: String,
    default: "false",
  },
  type: {
    type: Boolean,
    default: false,
  },
  hobby: {
    type: Object,
    default: () => {},
  },
});

// const player = ref();
// const videoModel = ref(true);

const likeCount = computed(() => props.video.thumbUp);
const collectionCount = computed(() => props.video.collection);
const lookCount = computed(() => props.video.lookCount);

const videoHeight = computed(() =>
  props.mobile === "false" ? "300px" : "700px"
);
const videoWidth = computed(() => (props.mobile === "false" ? "100%" : "70%"));

const myVideo = ref(null);
const myCanvas = ref(null);
const isPlay = ref(false);
// 播放时间监听函数
function timeUpdateListener() {
  const currentTime = myVideo.value.currentTime;
  if (!props.type) {
    if (currentTime >= 10) {
      stopPlay();
      emits("open");
    }
  }
}

const drawCanvas = () => {
  const ctx = myCanvas.value.getContext("2d");
  // myVideo.value.addEventListener("play", function () {
  function draw() {
    ctx.drawImage(
      myVideo.value,
      0,
      0,
      myCanvas.value.width,
      myCanvas.value.height
    );
    requestAnimationFrame(draw);
  }
  draw();
  // });
};

const play = () => {
  isPlay.value = !isPlay.value;
  if (isPlay.value) {
    startPlay();
  } else {
    stopPlay();
  }
};

// 开始播放函数
function startPlay() {
  myVideo.value.play();

  myVideo.value.addEventListener("timeupdate", timeUpdateListener);
}

// 停止播放函数
function stopPlay() {
  myVideo.value.pause();
  myVideo.value.removeEventListener("timeupdate", timeUpdateListener);
}

onMounted(() => {
  setTimeout(() => {
    drawCanvas();
  }, 500);
});
</script>

<style scoped lang="scss">
@mixin videoItem() {
  width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

video,
canvas {
  max-width: 100%;
}

.video-item {
  @include videoItem();
}

.video-item1 {
  @include videoItem();
  position: relative;
  .oper-img {
    width: 40px;
    height: 40px;
  }

  .play-btn {
    position: absolute;
    bottom: 10px;
    left: 16%;
  }
}

.mobile {
  width: 70% !important;
}

.oper {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: end;
  & > div {
    display: flex;
    align-items: center;
    color: #bfbfbf;
    margin-left: 15px;
    justify-content: end;
  }
}

.fontM {
  font-size: 10px !important;
}

.item-icon {
  width: 18px;
  height: 18px;
  margin-right: 4px;
}
.item:hover {
  cursor: pointer;
}
</style>
